<template>
  <div class="strut-div">
    <div :id="config.option.id" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
import autoHover from '../../util/autoHover.js';
  export default {
    name: "CommonStackChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null,
      }
    },
    methods: {
      initChart() {
        let option = {
          color: this.config.option.color,
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: this.config.option.data,
            top: '10%',
            left: '8%',
            orient: 'horizontal',
            itemGap: 5,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#E9F4FF'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false,
            boundaryGap: [0, 0],
            position: 'top'
          },
          yAxis: {
            type: 'category',
            data: this.config.option.yAxis,
            axisLabel: {
              show: true,
              interval: '0',
              textStyle: {
                fontSize: 14,
                color: '#E9F4FF',
              },
            }
          },
          series: this.config.option.series
        };

        setTimeout(() => {
          this.chart.setOption(option);
					this.timeTicket =	autoHover.autoHover(this.chart,option,option.yAxis.data.length);
        }, 300);

      }
    },
    mounted() {
      this.chart = echarts.init(document.getElementById(this.config.option.id));
    },
		beforeDestroy() {
    	autoHover.stopHover(this.timeTicket);
    }
  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
